<template>
  <div class="userList-box">
    <div class="userList-main">
      <div class="table-top" style="display: inline-block;text-align: right">
        <!-- 操作按钮 -->
        <div>
          <el-button type="cancel" @click="batchDelete">删除</el-button>
          <el-button type="primary" @click="saveUserInfo(null,1)">新建</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading" style="width: 100%" :index="indexMethod">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="index" type="index" label="序号" width="75">
          </el-table-column>
          <el-table-column prop="title" label="歌曲名" width="240">
          </el-table-column>
          <el-table-column prop="picUrl" label="歌曲链接">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <div>
                <span style="color: #e63e3b;cursor: pointer" @click="deleteUser(scope.row.title)">删除</span>
                <span style="color: #e63e3b;cursor: pointer;margin-left: 15px" @click="saveUserInfo(scope.row,2)">编辑</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="userTitle" :visible.sync="userTitleVisible" width="50%" top="5%">
      <el-form class :model="userData" :rules="rules" label-position="right" :inline="true" ref="userData" label-width="78px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="歌曲名" prop="title">
              <el-input :disabled="userOperationType === 2" v-model="userData.title" placeholder="请输入标题" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="歌曲链接" prop="picUrl">
              <el-input :disabled="userOperationType === 2" v-model="userData.picUrl" placeholder="请输入类型" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="cancel" @click="cancelBtn()">取消</el-button>
        <el-button type="primary" v-if="userOperationType == 1" @click="addUser('userData')">保存</el-button>
        <el-button type="primary" v-if="userOperationType == 2" @click="updateUser('userData')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [
        {
          picUrl: 'http://101.35.150.167/song/song19',
          title: '祖国颂',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song20',
          title: '我的祖国',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song21',
          title: '保卫黄河',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song22',
          title: '我的中国心',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song23',
          title: '长城长',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song24',
          title: '祖国不会忘记',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song25',
          title: '中国人',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song26',
          title: '绣红旗',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song27',
          title: '红星照我去战斗',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song10',
          title: '颂歌献给党',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song11',
          title: '正义的旋律',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song12',
          title: '歌颂共产党',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song13',
          title: '祖国颂',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song14',
          title: '红歌100首',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song15',
          title: '红色经典',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song16',
          title: '百歌诵中华',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song17',
          title: '百年',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song18',
          title: '歌声飘扬',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song01',
          title: '跟着共产党走',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song02',
          title: '没有共产党就没有新中国',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song03',
          title: '团结就是力量',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song04',
          title: '学习雷锋好榜样',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song05',
          title: '东方红',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song06',
          title: '大中国',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song07',
          title: '歌唱祖国',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song08',
          title: '我和我的祖国',
          url: '../details/details'
        },
        {
          picUrl: 'http://101.35.150.167/song/song09',
          title: '义勇军进行曲',
          url: '../details/details'
        }
      ],

      loading: false,
      total: 0,
      userOperationType: 1,
      userTitle: '',
      userTitleVisible: false,
      userData: {},
      deleteIdList: [],
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        password2: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 新增或保存
    saveUserInfo(userData, type) {
      this.userOperationType = type
      //新增
      if (type === 1) {
        this.userData = {}
        this.userTitle = '新增'
      }
      // 保存
      else {
        this.userData = userData
        this.userTitle = '修改信息'
      }
      this.userTitleVisible = true
    },
    //取消修改或新增
    cancelBtn() {
      this.userTitleVisible = false
    },
    //更新信息
    updateUser(formName) {},
    //新增
    addUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.tableData.push(this.userData)
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.userTitleVisible = false
        }
      })
    },
    // 选中
    handleSelectionChange(selectList) {
      this.deleteIdList = []
      for (var i = 0; i < selectList.length; i++) {
        this.deleteIdList.push(selectList[i].id)
      }
    },
    // 批量删除
    batchDelete() {},
    /**
     * 自定义序号
     * @param index
     * @returns {*}
     */
    indexMethod(index) {
      return index
    },
    // 删除
    deleteUser(title) {
      this.tableData.forEach((item, index) => {
        if (item.title == title) {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.userList-box {
  width: 100%;
  height: 100%;
  .userList-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    .table-top {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 1);
      align-items: center;
      box-sizing: border-box;
      padding: 12px;
      border-bottom: 1px solid #edeef0;
    }
    .page-box {
      background: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 12px;
      text-align: right;
    }
    .table-box {
      flex: 1;
      background: rgba(255, 255, 255, 1);
    }
  }
}
.form-input-width {
  width: 360px;
}
</style>